<template>
  <div >
      <header-bar></header-bar>
      <h1 v-myshow="flag">显示隐藏</h1>
     <button @click="toLive">跳转livehouse页面</button>

     <!-- 瞬移组件<Teleport> -->
  
  <div id="mycontent">
    <Teleport to="#app">
        <div id="box">
          <el-dialog title="提示" width="30%"   v-model="diaFlag">
            <span>这是一段内容</span>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="diaFlag = false">取 消</el-button>
                <el-button type="primary" @click="diaFlag = false">确 定</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        </Teleport>
      </div>
     <h1>{{city}}</h1>
     <button @click="change">改变</button>
  </div>
</template>
<script setup>
  import {ref,reactive,toRef} from 'vue'
  // useRouter vue3的路由 也变为的组合式api的开发方式
  import {useRouter,onBeforeRouteLeave,onBeforeUpdate } from 'vue-router';

 let router=useRouter();//获取到路由操作实例

  let toLive=()=>{

      // router.push("/live")
      // 路由跳转 并传参
      console.log(router,"---编程时路由对象")
  
      router.push({name:'live',query:{
        name:'lisi',
        age:18
      }})

      // router.go(num)//前进和后退的方法 num  为正数前进  负数后退  
      // router.replace()//不产生历史记录的跳转
      // router.back() //后退一步
     // router.forward() //前进一步
    //  router.addRoute() //动态添加路由
     // router.options.routes //获取路由配置信息
   
  }
  // 路由组件内部的路由守卫onBeforeRouteLeave onBeforeUpdate
  onBeforeRouteLeave((to,from,next)=>{
    console.log(to,from,"---路由守卫")
    next();
  })
  // 全局自定义指令后的值
  let flag=ref(true);



// ref toRef  toRefs 的区别
// toRefs 是reactive 的数据 每一个都变为 ref数据
// toRef 是reactive 的数据 指定某一个变为 ref数据
  let state=reactive({
     city:"哈尔滨",
     coutry:"中国"
  })
  // 也可以基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步
  let city=toRef(state,"city")

  let change=()=>{
     state.city="齐齐哈尔"
  }
 
  let diaFlag=ref(true)


</script>